<template>
  <div class="home">
      <ul>
        <li @click="tab(1)">疾风剑豪</li>
        <li @click="tab(2)">影流之主</li>
        <li @click="tab(3)">德玛西亚</li>
        <li @click="tab(4)">崔丝塔娜</li>
      </ul>
      <keep-alive>
        <!-- keep-alive 能让组件保持活动状态 也就是组件并不会销毁 -->
        <!-- component 渲染动态组件的标签 is属性用来绑定要渲染的组件 -->
        <component :is="curCom"></component>
      </keep-alive>
      
  </div>
</template>

<script>
import comFirst from '@/components/comFirst'
import comSecond from '@/components/comSecond'
import comThird from '@/components/comThird'
import comFoth from '@/components/comFoth'
export default {
  name: 'Home',
  components: {
    comFirst,
    comSecond,
    comThird,
    comFoth
  },
  data() {
    return {
      curCom: 'comFirst'
    }
  },

  methods: {
    tab(num) {
      switch(num) {
        case 1:
        this.curCom = 'comFirst'
        break;
        case 2: 
        this.curCom = 'comSecond'
        break
          case 3: 
        this.curCom = 'comThird'
        break
          case 4: 
        this.curCom = 'comFoth'
        break
      }
    }
  }
}
</script>
